<template>
  <div>
    为<span style="color:red">{{ emp.empName }}</span>分配角色
    
    
     <el-transfer 
     v-model="value" 
     :data="data" 
     :titles="['备选角色','已有角色']"
     :props="{key: 'roleId',label: 'roleName'}"
     style="text-align: left"
     ></el-transfer>
     <el-button @click="doDistRoleToEmp" class="left">分配角色</el-button>
    
    
  </div>
</template>

<script>

import { findOne as findOneEmp , distRoleToEmp} from '@/api/emp'
import { findAll as findAllRoles} from '@/api/role'

export default {
    mounted(){
        let empId = this.$route.params.empId;
        findOneEmp(empId).then(r=>{
            if(r.code == 200){
                this.emp = r.data;
                console.log(this.emp);
                this.value = this.emp.role.map(role => role.roleId);
            }
        })

        findAllRoles().then(r=>{
            this.data = r.data;
        })
    },
    data(){
        return{
            data:[],
            value:[],
            emp:{}
        }
    },
    methods:{
        doDistRoleToEmp(){
            let empId = +this.$route.params.empId;
            let roleIds = this.value;
            distRoleToEmp(empId,roleIds).then(r=>{
                if(r.code == 200){
                    this.$message.success(r.msg);
                    return;
                }
                this.$message.error(r.msg);
            })
        }
    }

}
</script>

<style>

</style>